import React from 'react';
import ReactDOM from 'react-dom';
import gql from "graphql-tag";
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { AppContainer } from 'react-hot-loader';

import './styles/index.css';
import Content from './containers/Content';
import registerServiceWorker from './registerServiceWorker';
import Reducer from './reducers'

const store = createStore(
  Reducer, /* reducer */
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), /* preloadedState */
  applyMiddleware(thunk) /* enhancer(middleware) */
);


// Wrap the rendering in a function:
const render = Component => {
  ReactDOM.render(
    // Wrap App inside AppContainer
    <AppContainer>
      <Provider store={store}>
        <Content />
      </Provider>
    </AppContainer>,
    document.getElementById('root')
  );
};

// Do this once
registerServiceWorker();

// Render once
render(
  <Provider store={store}>
    <Content />
  </Provider>
);

// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept();
}
